<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<style>
			html,
			body {
				height: 100%;
				margin: 0px;
				padding: 0px;
			}
			.mui-bar{
				background: #FE635F;
			}
			
		.mui-titles{
			position: relative;
			float: right;
		}
		.mui-content{
			position: relative;
			float: left;
			width: 100%;
			padding: 10px  0px;
			display: inline-block;
			background: #FFFFFF;
		}		
		.biaoti{
			position: relative;
			float: left;
			width: calc(100% - 44px);
			height: 100%;
			display: flex;
			justify-content: space-around;
			padding-top: 5px;
			box-sizing: border-box;
		}
		
		.biaoti>div{
			width: 64px;
			height: 35px;
			font-size:15px;
            font-weight:bold;
            color:rgba(255,255,255,1);
			line-height: 35px;
		
			box-sizing: border-box;
		}
	.tiactive{
			border-bottom: 2px  solid #FFFFFF;
	}
		
		.mui-bar-nav>img:nth-child(1){
			position: relative;
			float: left;
			width: 20px;
			height: 27px;
			margin-top: 10px;
		}
		.mynews{
			position: absolute;
			width: 22px;
			height: 100%;
			right: 15px;
			z-index: 10;
		}
		.mynews>img:nth-child(1){
			width: 22px;
			height: 22px;
			margin-top: 10px;
		}
		.mynews>img:nth-child(2){
				width: 7px;
				height: 7px;
				position: absolute;
				top: 10px;
				right: 0px;
		}
			
		a{
			color:#FFFFFF;
		}
		a:active{
				color:#FFFFFF;
		}
			.leftnews,.rightnews{
			position: relative;
		    width: 100%;
			float: left;
			margin-top: 15px;
			padding: 0  15px;
			box-sizing: border-box;
		}
		.leftnews>div:nth-child(1){
			position: relative;
			float: left;
			width: 44px;
			height: 100%;
			
		}
		
		.leftnews>div:nth-child(1)>img{
			width: 44px;
			height: 44px;
			border-radius: 50%;
			}
		
		.leftnews>div:nth-child(2){
					position: relative;
					float: left;
					width: calc(100% - 54px);
					height: 100%;
					padding-left: 10px;
					box-sizing: border-box;
				    padding-bottom: 15px;
					box-sizing: border-box;
				}
		.leftnews>div:nth-child(2)>div:nth-child(1){
			width: 100%;
			height: 22px;
			line-height: 22px;
			font-size:15px;
		    font-weight:500;
		   color:rgba(51,51,51,1)
		    line-height:22px;
			text-align: left;
		}
			.neirong{
				width: 100%;
				line-height: 22px;
				font-size:11px;
				font-weight:500;
				color:rgba(51,51,51,1);
				line-height:22px;
				background:rgba(255,255,255,1);
		        border-radius:10px;
				padding: 5px  0px;
				box-sizing: border-box;
			}
			.hudate{
				width: 100%;
			height: 22px;
			
			}
			.hudate>div:nth-child(1){
				position: relative;
				float: left;
				width: 80px;
				line-height: 22px;
				font-size:11px;
				font-weight:500;
				color:rgba(153,153,153,1);
				line-height:22px;
				text-align: left;
			}
		.talking{
			position: relative;
			float: left;
			width: 100%;
			padding: 10px;
			 box-sizing: border-box;
			border-bottom: 1px solid rgba(235,235,235,1);
		}	
			
		.imgs{
			width:100%;
			position: relative;
		}	
		.imgs>img{
			position: relative;
			float: left;
			width: calc((100% - 15px)/3);
			height: 90px;
			margin-left: 5px;
			margin-top: 5px;
		}
		.zans{
			position: relative;
			float: right;
			width:calc(100% -  80px  -10px);
            height: 22px;
		}
		
		.zans>div{
			position: relative;
			float: right;
			width: 80px;
			height: 22px;
		}
		.zans>div>img{
		position: relative;
		float: left;	
		width:22px;
		height:22px;
		}
	
				
		.zans>div>span{
			position: relative;
			float: left;
			width: calc(100% -  22px);
			height: 22px;
			line-height: 22px;
			text-align: right;
			padding-right:10px;
			box-sizing: border-box;
			font-size:13px;
            font-weight:500;
            color:rgba(151,151,151,1);
		}
		
		.myactivation{
			position: fixed;
			width: 65px;
			height:65px;
			right: 15px;
			bottom: 230px;
			z-index: 10;
		}
		
		.myactivation>img{
			width: 65px;
			height: 65px;
		}
		
		.talkabout{
			position: relative;
			float: left;
			width: 100%;
			padding-bottom: 50px;
			box-sizing: border-box;
		}
		.comments {
			
			
			padding: 0px;
			box-sizing: border-box;
		}
		
		.titles{
			position: relative;
			float: left;
			width: 100%;
			height: 50px;
			line-height: 50px;
			font-size:16px;
             font-weight:500;
             color:rgba(51,51,51,1);
             line-height:50px;
			}
		.pingluns{
border-bottom:1px  solid  rgba(235,235,235,1);
		}	
	
	.hutalkingaboutss{
		position: relative;
		float: left;
		width: 100%;
		background:rgba(246,246,246,1);
         border-radius:2px;
padding-left: 5px;
padding-right: 5px;
box-sizing: border-box;
	}
	 .hutalkingaboutss>div{
		 position: relative;
		 float: left;
		 width: 100%;
	 }
	 
	 	.firstpeople,.secondpeople{
	 		 position: relative;
	 		 float: left;
			 font-size:14px;
              font-weight:500;
              color:rgba(57,108,165,1);
              line-height:24px;
			  letter-spacing: 1px;
			  display: inline-block;
			  z-index: 10;
	 }
	 	.reply{
			position: relative;
			float: left;
			font-size:14px;
			font-weight:500;
			color:rgba(57,108,165,1);
			line-height:24px;
			letter-spacing: 1px;
		}
				
				.hupinglun{
					 position: relative;
					 font-size:14px;
					 font-weight:500;
					 color:rgba(102,102,102,1);
					 line-height:24px;
					 letter-spacing: 1px;
				}
			.shirink{
				position: relative;
				float: left;
				width: 100%;
			}
			.shirink>div{
				position: relative;
				float: left;
				padding-right: 5px;
				box-sizing: border-box;
				font-size:14px;
                 font-weight:500;
                 color:rgba(57,108,165,1);
                 line-height:24px;
			}
			.shirink>img{
				position: relative;
				float: left;
				width: 9px;
	     		height: 6px;
			    margin-top: 8px;
				margin-left: 5px;
			}
			.keys{
				position: fixed;
				width: 100%;
				height: 50px;
				bottom: 0px;
				padding: 8px   15px;
				box-sizing: border-box;
				z-index: 100;
				background:rgba(249,249,249,1);
			}
			.keys>input{
				position: relative;
				width: calc(100% - 75px);
				float: left;
				height: 35px;
				font-size:14px;
                font-weight:500;
                color:rgba(184,184,184,1);
                line-height:35px;
				border: none;
				background:rgba(255,255,255,1);
                 border-radius:15px;
				 padding-left: 20px;
				 box-sizing: border-box;
			}
			
			.keys>span{
				position: relative;
				float: right;
				width: 65px;
				text-align: center;
				 height: 35px;
				 font-size:15px;
                font-weight:500;
                color:rgba(255,255,255,1);
                line-height:35px;
				background:linear-gradient(180deg,rgba(252,126,119,1) 0%,rgba(254,96,93,1) 100%);
                border-radius:15px;
			}
			.mui-title{
				color: #FFFFFF;
			}
		</style>
	</head>

	<body contextmenu="return false;"  >
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		
		</header>

		<div class="mui-content" id="content">
			<div id='msg-list'>
				<div class="leftnews">
					<div id="usertouxiang"><img src="../image/touxiangmy.png" /></div>
					<div>
						<div id="username">张雪</div>
						<div class="hudate">
							<div id="create_time">30分钟前</div>
							<div class="zans">
								<div class="comment" id="pingluns"><span>10</span><img src="../image/comment.png" /></div>
								<div class="fablous" state='0' id="zan"><span>10</span><img src="../image/zanfalse.png" /></div>
							</div>
						</div>


					</div>
					<div class="talking">
						<div class="neirong"></div>
						<div class="imgs">
							<!-- <img src="../image/drug.png" />
							<img src="../image/drug.png" />
							<img src="../image/drug.png" />
							<img src="../image/drug.png" /> -->
						</div>
					</div>

					<div class="titles">全部评论</div>

					<div class="talkabout">
							<!-- <div class="comments leftnews">
							<div><img src="../image/touxiang.png" /></div>
							<div class="pingluns">
								<div>李四</div>
								<div class="hudate">
									<div>21分钟前</div>
								</div>
								<div class="neirong">音乐让人痴迷的点，就是它的内容，它的情感，它的境界.</div>
								<div class="hutalkingaboutss">
									<div>
										<div class="firstpeople">李四</div>
										<div class="hupinglun">这就是音乐我终生热爱的音乐之一，这就是爱情</div>
									</div>
									<div>
										<div class="firstpeople">李四</div>
										<div class="reply">回复</div>
										<div class="secondpeople">陈雪:</div>
										<div class="hupinglun">这就是音乐我终生热爱的音乐</div>
									</div>
								</div>
							</div>
						</div> -->
						
						
						<!-- <div class="comments leftnews">
							<div><img src="../image/touxiang.png" /></div>
							<div class="pingluns">
								<div>李四</div>
								<div class="hudate">
									<div>20分钟前</div>
								</div>
								<div class="neirong">音乐让人痴迷的点，就是它的内容，它的情感，它的境界.</div>
								<div class="hutalkingaboutss">
									<div>
											<div class="firstpeople">李四</div>
									<div class="hupinglun">这就是音乐我终生热爱的音乐之一，这就是爱情</div>
									</div>
									<div>
										<div class="firstpeople">李四</div>
										<div class="reply">回复</div>
										<div class="secondpeople">陈雪:</div>
										<div class="hupinglun">这就是音乐我终生热爱的音乐</div>
									</div>
									<div>
									<div class="firstpeople">李四</div>
									<div class="hupinglun">这就是音乐我终生热爱的音乐</div>
									</div>
									<div>
										<div class="firstpeople">李四</div>
										<div class="reply">回复</div>
										<div class="secondpeople">陈雪:</div>
										<div class="hupinglun">这就是音乐我终生热爱的音乐</div>
									</div>
									
									<div class="shirink"><div>展开全部回复 </div><img src="../image/xiangshangjiantou.png" /></div>
								</div>
							</div>
						</div> -->
					</div>
				</div>
			</div>
			
			<div class="keys" ><input id="jianpanhu" data-pinid="0" data-to=""  placeholder="评论点什么"   type="text"    /> <span  class="already">评论</span> </div>
		
		</div>
		
		
		
	</body>
	<script src="../js/mui.min.js"></script>
	<script src="../js/jquery-3.1.1.min.js"></script>
	<script type="text/javascript" charset="utf-8">
		mui.plusReady(function(){
			var url = plus.storage.getItem('url');
			var user = plus.storage.getItem('user');
			user = JSON.parse(user);
			var web = plus.webview.currentWebview();
			var dongtai = web.pinglun;
			var page = 1;
			// var state = 0;
			// mui.alert(pinglun);
			mui.post(url+'/juyou/Jiaoyou/getdynamicinfo',{token:user.token,pinglun:dongtai},function(res){
				// mui.toast(res.msg)
				if(res.code==200){
					var data = res.data;
					$("#usertouxiang").children('img').attr('src',data.data.user.touxiang);
					$("#username").text(data.data.user.name);
					$("#create_time").text(data.data.create_time);
					$("#zan").children('span').text(data.zan);
					$(".neirong").text(data.data.dir);
					if(data.data.type=='图片动态'){
						var img = '';
						mui.each(data.data.tupian,function(i,v){
							img+='<img src="'+v+'" />';
						})
						$(".imgs").append(img);
					}else{
						var img = '<video style="width:100%" src="'+data.data.videos+'" controls="controls"  poster="../image/poster-1.png" >'+
						'</video>';
						$(".imgs").append(img);
					}
					if(data.wde==1){
						$("#zan").attr('state',1);
						$("#zan").children('img').attr('src','../image/zantrue.png')
					}else{
						$("#zan").attr('state','0');
						$("#zan").children('img').attr('src','../image/zanfalse.png')
					}
					$("#pingluns").children('span').text(data.pinglun.total);
					mui.init({
						pullRefresh : {
							container:'.leftnews',//待刷新区域标识，querySelector能定位的css选择器均可，比如：id、.class等
							up : {
								height:50,//可选.默认50.触发上拉加载拖动距离
								auto:true,//可选,默认false.自动上拉加载一次
								contentrefresh : "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
								contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
								callback :function(){
									// setTimeout(function(){
									// 	mui('.talkabout').pullRefresh().endPullupToRefresh();
									// },1000);
									getData(function(){
										mui('.leftnews').pullRefresh().endPullupToRefresh();
									})
									} //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
								},
							}
						});
					
					function getData(func){
						if(page==0){
							mui.toast('没有更多了');
							if(func){
								func();
							}
							return
						}
						mui.post(url+'/juyou/Jiaoyou/getpinglunlist',{token:user.token,dynamic:dongtai,page:page},function(res){
							if(res.code==200){
								if(res.data.length<10){
									page = 0;
								}else{
									page = page+1;
								}
								var str = '';
								mui.each(res.data,function(i,v){
									str+='<div class="comments leftnews">'+
											'<div><img src="'+v.user.touxiang+'" /></div>'+
											'<div class="pingluns">'+
												'<div>'+v.user.name+'</div>'+
												'<div class="hudate">'+
													'<div>'+v.create_time+'</div>'+
												'</div>'+
												'<div class="neirong" data-pinid="'+v.id+'" data-id="'+v.user.id+'" data-name="'+v.user.name+'">'+v.pinglun+'</div>'+
												'<div class="hutalkingaboutss" data-pinid="'+v.id+'">';
												if(v.huifu){
													mui.each(v.huifu,function(is,vs){
														if(is<5){
																str+='<div><div class="firstpeople" data-pinid="'+v.id+'" data-id="'+vs.forms.id+'" data-name="'+vs.forms.name+'">'+vs.forms.name+'&nbsp;</div>';
														}else {
																str+='<div style="display:none"><div class="firstpeople" data-pinid="'+v.id+'" data-id="'+vs.forms.id+'" data-name="'+vs.forms.name+'">'+vs.forms.name+'&nbsp;</div>';
														}
														if(vs.tos){
															str+='<div class="reply">回复</div><div class="secondpeople" data-pinid="'+v.id+'" data-id="'+vs.tos.id+'" data-name="'+vs.tos.name+'">'+vs.tos.name+':</div>';
														}else{
															str+='<div class="reply">:</div>';
														}
														str+='<div class="hupinglun">'+vs.neirong+'</div></div>';
													})
												}
												
													str+='</div>';
													if(v.huifu.length>5){
														str+='<div class="shirink"    datatype="0"><div>点击显示其他回复 </div><img src="../image/xiangshangjiantou.png" /></div>';
													}
															str+='</div>'+
														'</div>';
								});
								$(".talkabout").append(str);
							}else{
								mui.toast(res.msg);
							}
							if(func){
								func();
							}
						})
					}
				}else{
					mui.toast(res.msg);
				}
			})
			
			//评论动态
			mui('.keys').on('tap','.already',function(){
				var text = $(this).text();
				if(text=='评论'){
					var str = $("#jianpanhu").val();
					if(!str){
						mui.toast('请输入评价内容!');
						return
					}
					plus.nativeUI.showWaiting();
					mui.post(url+'/juyou/Jiaoyou/addpinglun',{token:user.token,dynamic:dongtai,pinglun:str},function(res){
						plus.nativeUI.closeWaiting();
						if(res.code==200){
							mui.toast(res.msg);
							setTimeout(function(){
								location.reload();
							},1000)
						}else{
							mui.toast(res.msg);
						}
					})
				}else{
					var str = $("#jianpanhu").val();
					if(!str){
						mui.toast('请输入回复内容!');
						return
					}
					var pinglun = $("#jianpanhu").attr('data-pinid');
					var tos = $("#jianpanhu").attr('data-to');
					plus.nativeUI.showWaiting();
					mui.post(url+'/juyou/Jiaoyou/addhuifu',{token:user.token,neirong:str,pinglun:pinglun,tos:tos},function(res){
						plus.nativeUI.closeWaiting();
						if(res.code==200){
							mui.toast(res.msg);
							setTimeout(function(){
								location.reload();
							},1000)
							// $(".hutalkingaboutss [data-pinid="+res.data.pinglun+"]").append('haha')
							
						}else{
							mui.toast(res.msg);
						}
					})
				}
				
			})
			
			//点击修改成回复评论
			// $(document).on('tap','.hutalkingaboutss',function(){
			// 	var pinid = $(this).attr('data-pinid');
			// 	// var userid = $(this).attr()
			// 	$("#jianpanhu").attr('data-pinid',pinid);
			// 	$("#jianpanhu").val();
			// 	$("#jianpanhu").attr('placeholder',"回复:");
			// 	$(".already").text('回复');
			// })
			//点击修改成回复评论
			$(document).on('tap','.neirong',function(){
				var pinid = $(this).attr('data-pinid');
				var tos = $(this).attr('data-id');
				var name = $(this).attr('data-name');
				$("#jianpanhu").attr('data-pinid',pinid);
				$("#jianpanhu").val();
				$("#jianpanhu").attr('placeholder',"回复"+name+":");
				$("#jianpanhu").attr('data-to',tos);
				$(".already").text('回复');
			})
			//点击修改成回复评论
			$(document).on('tap','.firstpeople',function(){
				var pinid = $(this).attr('data-pinid');
				var tos = $(this).attr('data-id');
				var name = $(this).attr('data-name');
				$("#jianpanhu").attr('data-pinid',pinid);
				$("#jianpanhu").val();
				$("#jianpanhu").attr('placeholder',"回复"+name+":");
				$("#jianpanhu").attr('data-to',tos);
				$(".already").text('回复');
			})
			
			$(document).on('tap','.secondpeople',function(){
				var pinid = $(this).attr('data-pinid');
				var tos = $(this).attr('data-id');
				var name = $(this).attr('data-name');
				$("#jianpanhu").attr('data-pinid',pinid);
				$("#jianpanhu").val();
				$("#jianpanhu").attr('placeholder',"回复"+name+":");
				$("#jianpanhu").attr('data-to',tos);
				$(".already").text('回复');
			})
			
			
			mui("#content").on("tap", ".numbers", function() {
						mui.openWindow({
							url: 'qunmembersub4.html',
							id: "qunmembersub4.html",
							extras: {
								src: '../video/shiyong.mp4',
							},
							show: {
								autoShow: true, //页面loaded事件发生后自动显示，默认为true
								aniShow: "slide-in-right", //页面显示动画，默认为”slide-in-right“；
								duration: 100 //页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒；
							},
							waiting: {
								autoShow: true, //自动显示等待框，默认为true
								title: '正在加载...', //等待对话框上显示的提示内容
							}
						})
					})
			
					// 点赞
					mui(".zans").on("tap", ".fablous", function() {
						var state = $(this).attr("state");
						var that = this;
						if(state==1){
							state = '0';
						}else{
							state = 1;
						}
						mui.post(url+'/juyou/Jiaoyou/dianzan',{token:user.token,dongtai:dongtai,state:state},function(res){
							if(res.code==200){
								if(state==1){
									$(that).attr("state", "1")
									$(that).children("img").attr("src", "../image/zantrue.png")
									$(that).children('span').text(res.data.count)
								}else{
									$(that).attr("state", "0")
									$(that).children("img").attr("src", "../image/zanfalse.png")
									$(that).children('span').text(res.data.count)
								}
							}else{
								mui.toast(res.msg);
							}
						})
						
					})
			
			
					//切换交友广场
					mui(".biaoti").on("tap", "div", function() {
						var state = $(this).addClass("tiactive")
						$(this).siblings().removeClass("tiactive");
					})
			
					//发布动态
					mui(".myactivation").on("tap", "img", function() {
						mui.openWindow({
							url: 'hucomment.html',
							id: "hucomment.html",
							extras: {
								//参数
							},
							show: {
								autoShow: true, //页面loaded事件发生后自动显示，默认为true
								aniShow: "slide-in-right", //页面显示动画，默认为”slide-in-right“；
								duration: 100 //页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒；
							},
							waiting: {
								autoShow: true, //自动显示等待框，默认为true
								title: '正在加载...', //等待对话框上显示的提示内容
							}
						})
					})
					
					
				
						//点击空白 输入框内容消失
						$("body").on("tap","#msg-list",function(e){
							var _con=$(".pingluns")
							if(!_con.is(e.target) && _con.has(e.target).length === 0)	{
								 $(".already").text("评论")
								 $("#jianpanhu").attr("placeholder","评论点什么");  
							}
						})
						
						//回复消息完成
						$(".keys").on("tap",".already",function(){
							 $(".already").text("评论")
							  $("#jianpanhu").attr("placeholder","评论点什么");  
						})
						
						// 展开全部回复
						$(document).on("tap",".shirink",function(){
							var datatype=$(this).attr("datatype")
							if(datatype==0){
							$(this).siblings(".hutalkingaboutss").children("div").css("display","block")
							$(this).children("div").text("点击收回其他回复")	
							$(this).children("img").attr("src","../image/xiall.png")	
							$(this).attr("datatype","1")
							}else{
						 var ss=$(this).siblings(".hutalkingaboutss").children("div");
							for(var i=0;i<ss.length;i++){
								if(i>4){
								    ss[i].style.display="none"
								}
							}
							$(this).children("div").text("点击显示其他回复")	
							$(this).children("img").attr("src","../image/xiangshangjiantou.png")	
							$(this).attr("datatype","0");
							}
						})
						
			//点击消息评论回复			
			 //  mui(".comments").on("tap", ".hupinglun", function(e) {
				//   var  height=$(this).offset().top;
				//       $(window).scrollTop(height);
				// var name=$(this).siblings(".firstpeople").text();
				//  $(".already").text("回复")
				//     $(".keys").css("display","block")	
				//  $("#jianpanhu").attr("placeholder",'回复'+name);  
			 // var nativeWebview, imm, InputMethodManager;  
			 // var initNativeObjects = function() {
			 //     if (mui.os.android) {  
			 //         var main = plus.android.runtimeMainActivity();  
			 //         var Context = plus.android.importClass("android.content.Context");  
			 //         InputMethodManager = plus.android.importClass("android.view.inputmethod.InputMethodManager");  
			 //         imm = main.getSystemService(Context.INPUT_METHOD_SERVICE);  
			 //     } else {  
			 //         nativeWebview = plus.webview.currentWebview().nativeInstanceObject();  
			 //     }  
			 // };  
			 // var showSoftInput = function() {  
			 //     if (mui.os.android) {  
			 //         imm.toggleSoftInput(0, InputMethodManager.SHOW_FORCED);  
			 //     } else {  
			 //         nativeWebview.plusCallMethod({  
			 //             "setKeyboardDisplayRequiresUserAction": false  
			 //         });  
			 //     }  
			 //     setTimeout(function() {  
			 //        //此处可写具体逻辑设置获取焦点的input  
			 //        var inputElem = document.querySelector('input');  
			 //               inputElem.focus();   
			 //     }, 200);  
			 // };  
			 // mui.plusReady(function() {  
			 //     initNativeObjects();  
			 //     showSoftInput();  
			 // });  
			 // 
			 // 		})
		})
		
	


	</script>


</html>
